<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3伸缩布局</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: '微软雅黑';
			background-color: #F7F7F7;
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.wrapper {
			width: 1024px;
			margin: 0 auto;
		}

		.wrapper > section {
			min-height: 300px;
			margin-bottom: 30px;
			box-shadow: 1px 1px 4px #DDD;
			background-color: #FFF;
		}

		.wrapper > header {
			text-align: center;
			line-height: 1;
			padding: 20px;
			margin-bottom: 10px;
			font-size: 30px;
		}

		.wrapper section > header {
			line-height: 1;
			padding: 10px;
			font-size: 22px;
			color: #333;
			background-color: #EEE;
		}

		.wrapper .wrap-box {
			padding: 20px;
		}

		.wrapper .brief {
			min-height: auto;
		}

		.wrapper .flex-img {
			width: 100%;
		}

		/*全局设置*/
		section ul {
			height: 800px;
			/*把所有ul指定成了伸缩盒子*/
			display: flex;

			/*应用此属性必须要换行*/
			flex-wrap: wrap;
		}

		section li {
			width: 150px;
			height: auto;
			text-align: center;
			line-height: 200px;
			margin: 10px;
			background-color: pink;
		}
		
		.flex-start ul {
			align-content: flex-start;
		}

		.flex-end ul {
			align-content: flex-end;
		}

		.center ul {
			align-content: center;
		}

		.space-around ul {
			align-content: space-around;
		}

		.space-between ul {
			align-content: space-between;
		}

		.stretch ul {
			align-content: stretch;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<header>CSS3-伸缩布局详解</header>

		<!-- 简介 -->
		<section class="brief">
			<header>align-content</header>
			<div class="wrap-box">
				<p>堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制，包括flex-start、flex-end、center、space-between、space-around、stretch</p>
			</div>
		</section>

		<!-- 分隔线 -->
		<section class="flex-start">
			<header>flex-start</header>
			<div class="wrap-box">
				<p>起始点对齐</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</section>

		<section class="flex-end">
			<header>flex-end</header>
			<div class="wrap-box">
				<p>终止点对齐</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</section>

		<section class="center">
			<header>center</header>
			<div class="wrap-box">
				<p>居中对齐</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</section>

		<section class="space-around">
			<header>space-around</header>
			<div class="wrap-box">
				<p>四周环绕</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</section>

		<section class="space-between">
			<header>space-between</header>
			<div class="wrap-box">
				<p>两端对齐</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</section>
		
		<section class="stretch">
			<header>stretch</header>
			<div class="wrap-box">
				<p>拉伸</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</section>
	</div>
</body>
</html>